<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>准备</title>
  </head>
  <body>
    <ul class="list">
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>
    <script>
      // Object.defineProperty
      const person = {
        firstName: "闫",
        lastName: "海静",
      };

      // Object.defineProperty(person, "fullName", {
      //   // value: "", // 属性值
      //   writable: true, // 是否可修改（可写）
      //   get() {}, // 读取fullName属性触发get方法，get方法的返回值就是属性的值
      //   set(val) {}, // 设置/修改fullName属性触发set方法
      //   configurable: true, // 是否可重新配置（不能重新定义属性的元属性，不能被delete删除属性）
      //   enumerable: true, // 是否可枚举（for in）
      // });

      Object.defineProperty(person, "fullName", {
        get() {
          return this.firstName + " " + this.lastName;
        },
        set(val) {
          // 数组解构赋值语法
          const [firstName, lastName] = val.split(" ");

          this.firstName = firstName;
          this.lastName = lastName;
        },
        configurable: true,
        enumerable: true,
      });

      console.log(person.fullName);

      console.log(person);

      person.fullName = "陶 舒剑";

      // 将伪数组转真数组
      // 常见的伪数组：arguments、nodeList
      function fn(...args) {
        console.log(args);
        // console.log(arguments);
      }
      fn(1, 2, 3);

      const lis = document.querySelectorAll(".list li");
      console.log(lis);
      // ES6转真数组的方法
      // const newLis = Array.from(lis);
      // console.log(newLis);
      // 旧语法转真数组的方法
      // 将slice方法的this指向lis，所以slice方法就会对lis进行截取
      console.log([].slice.call(lis)); // 等价于lis.slice()
      console.log(Array.prototype.slice.call(lis));

      // 判断节点类型
      console.log(lis[0].nodeType); // 元素节点：1

      console.dir(lis[0].childNodes[0].nodeType); // 文本节点：3

      console.log(lis[1].childNodes);

      // 文档碎片：减少DOM操作的次数
      // 1. 创建文档碎片节点
      const fragment = document.createDocumentFragment();

      // 2. 将需要操作的DOM元素添加到文档碎片节点中(元素会自动从DOM树中移除)
      const ul = document.querySelector(".list");

      let el;

      while ((el = ul.firstChild)) {
        // 将li添加到fragment中，元素会自动从DOM树中移除
        fragment.appendChild(el);
      }

      console.dir(fragment);

      // 3. 对文档碎片节点中DOM元素进行操作
      [].slice.call(fragment.children).forEach((li) => {
        // li.childNodes[0].innerText
        li.childNodes[0].textContent += "~~~";
      });

      // 4. 将文档碎片节点中操作好的DOM元素添加到页面中生效
      ul.appendChild(fragment);
    </script>
  </body>
</html>
